import React from 'react'
import { useState, useEffect } from 'react'
import style from '../styles/lx.module.css'
import { ArrowLeft, Arrow } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Sticky } from 'react-vant';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';
export default function List() {
  let navigate = useNavigate()
  let [pay, setpay] = useState([])
  let [paylist, setpaylist] = useState([])
  let [a, seta] = useState({})
  useEffect(() => {
    getpay()
    getpaylist()
  }, [])
  //获取缴费类型
  let getpay = async () => {
    let { data: { code, data } } = await axios.get('/lx/pay')
    if (code === 200) {
      setpay(data)
    }
  }
  //获取缴费记录
  let getpaylist = async () => {
    let { data: { code, data, data1 } } = await axios.get('/lx/paylist')
    // let cid=data.rommid.cid
    // setcid(cid)
    console.log(data, '456546')
    if (code === 200) {
      setpaylist(data)
      seta(data1)
      localStorage.setItem('data', JSON.stringify(data))
      localStorage.setItem('data1', JSON.stringify(data1))
    }
  }
  return (
    <div className={style.html}>
      <Sticky>
        <div className={`${style.box1} ${style.content}`}>
          <ArrowLeft onClick={() => navigate(-1)}></ArrowLeft>
          <span style={{ marginLeft: "2.4rem" }}>生活缴费</span>
        </div>
      </Sticky>
      <div className={`${style.box2} ${style.content}`}>
        <p>我的缴费</p>
        {
          paylist.map(item => (
            <div className={style.box3} key={item._id}>
              <div>
                <img src='/img/用户.png' style={{ width: '1.2rem', height: "1.2rem", marginLeft: "-0.4rem" }} alt="" />
              </div>
              <div>
                <p style={{ fontSize: '0.3rem', fontWeight: 'bold', marginTop: '-0.2rem' }}> <span style={{ fontSize: '0.32rem' }}>物业费</span> <button style={{ lineHeight: '0.25rem', marginLeft: '0.4rem', color: item.status === true ? 'green' : 'red', backgroundColor: '#FDE0E0', width: '1rem', height: '0.55rem' }}> <span style={{ marginTop: '0.5rem' }}>{item.status === true ? '正常' : '欠费'}</span></button> </p>

                <p style={{ fontSize: '0.27rem' }}>{a.name}{item.rommid.name} {item.userid.username} <Arrow onClick={() => navigate('/list1')} /></p>
              </div>
            </div>
          ))
        }
      </div>
      <div className={`${style.box4} ${style.content}`}>
        <p>新增缴费</p >
        <div className={`${style.box5} ${style.content}`}>
          {
            pay.map(item => (
              <div className={style.a} key={item._id}>
                <span style={{ marginLeft: '0.3rem' }}> < img src={item.img} style={{ width: '0.4rem', height: '0.4rem' }} alt="" /> </span>
                <span style={{ marginLeft: '0.3rem' }}>{item.name}</span>
              </div>
            ))
          }
        </div>
      </div>
    </div>
  )
}
